<script setup lang="ts">
import { queryOldDetail, saveOld } from '@/api';
import Upload from '@/components/avatar-upload/index.vue';
import { labelAlign, labelCol } from '@/const';
import { useOldForm } from '@/hooks';
import { detailToForm, formToSubmitParam } from '@/tools/old-form';
import type { FormFields } from '@/types';
import { message } from 'ant-design-vue';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import BaseForm from '../personnel-old-add/base-form.vue';
import BodyForm from '../personnel-old-add/body.vue'
import ExaminationForm from '../personnel-old-add/examination.vue'
import CheckRecord from './check-record.vue'
import Recommend from './recommend.vue'
import PersonItemWrap from './wrap.vue';


const route = useRoute();
const activeKey = ref('1');
const editMap = reactive<Record<string, boolean>>({
	base: false,
	body: false,
	examination: false,
	plan: false,
});
const detail = ref<FormFields>();
const id = ref<number>();
const { formState, validate, validateInfos } = useOldForm();

const changeEdit = (form: string, edit: boolean) => {
	if (!edit) {
		Object.assign(formState, detail.value || {});
	}
	editMap[form] = edit;
};

const save = (type: string) => {
	if (!editMap[type]) return;
	validate().then(() => {
		saveOld(formToSubmitParam(formState), id.value).then(res => {
			if (res.Code === 200) {
				message.success('保存成功');
				editMap[type] = false;
			}
		})
	});
};

onMounted(() => {
	if (!route.params.id) return;
	queryOldDetail(route.params.id as string).then(res => {
		if (res.Code === 200) {
			detail.value = detailToForm(res.Data || {});
			id.value = res.Data.ID;
			Object.assign(formState, detail.value);
		}
	});
});

const base = 'base'
const body = 'body'
const examination = 'examination'

</script>

<template>
	<div class="person-detail">
		<div class="form-wrap person-tab pb-0">
			<a-tabs v-model:activeKey="activeKey">
				<a-tab-pane key="1" tab="基础信息"></a-tab-pane>
				<a-tab-pane key="2" tab="体检记录"></a-tab-pane>
				<a-tab-pane key="3" tab="照护记录"></a-tab-pane>
			</a-tabs>
		</div>
		<template v-if="activeKey === '1'">
			<a-form :label-col="labelCol" :label-align="labelAlign">
				<PersonItemWrap title="基础信息" :edit="editMap[base]" @save="save(base)" @change="(edit) => changeEdit(base, edit)">
					<div class="flex">
						<div class="w-[25%] pr20 flex items-center">
							<!-- <a-image alt="example"
							:width="230"
							:src="formState.avatar" /> -->
							<Upload v-model:value="formState.avatar" :readonly="!editMap[base]"></Upload>
						</div>
						<div class="flex flex-wrap">
							<BaseForm  :validateInfos :formState :readonly="!editMap[base]"></BaseForm>
						</div>
					</div>
				</PersonItemWrap>
				<PersonItemWrap title="身体状况" :edit="editMap[body]" @save="save(body)" @change="(edit) => changeEdit(body, edit)">
					<BodyForm :validateInfos :formState :readonly="!editMap[body]"></BodyForm>
				</PersonItemWrap>
				<PersonItemWrap title="体检信息" :edit="editMap[examination]" @save="save(examination)" @change="(edit) => changeEdit(examination, edit)">
					<ExaminationForm :validateInfos :formState :readonly="!editMap[examination]"></ExaminationForm>
				</PersonItemWrap>
			</a-form>
		</template>
		<template v-if="activeKey === '2'">
			<CheckRecord></CheckRecord>
		</template>
		<template v-if="activeKey === '3'">
			<Recommend></Recommend>
		</template>
	</div>
</template>
<style scoped lang="less">
.person-tab {
	:deep(.ant-tabs-nav) {
		margin-bottom: 0;
	}
}
</style>
